<template>
  <el-card v-if="formAndTable" shadow="never" class="table-container">
    <template #header>
      <div class="search-container">
        <slot name="header"></slot>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :label-width="labelWidth"
      status-icon
      :model="modelValue"
      v-bind="$attrs"
    >
      <el-row>
        <template v-for="item in formItems" :key="item.label">
          <el-col :span="item.colSpan ?? 24">
            <el-form-item v-if="!item.isHidden" :label="item.label" :prop="item.field">
              <template v-if="item.type === 'input' || item.type === 'password'">
                <div class="flex w-full items-center">
                  <el-input
                    class="flex-1"
                    :disabled="item.disabled ?? false"
                    :placeholder="item.placeholder"
                    :show-password="item.type === 'password'"
                    v-model.trim="modelValue[`${item.field}`]"
                    clearable
                    :maxlength="item.maxlength"
                  />
                  <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
                </div>
              </template>
              <template v-else-if="item.type === 'select'">
                <div class="flex w-full items-center">
                  <el-select
                    class="flex-1"
                    :disabled="item.disabled ?? false"
                    :placeholder="item.placeholder"
                    v-model="modelValue[`${item.field}`]"
                    style="width: 100%"
                    clearable
                    @change="handleChange(item)"
                  >
                    <el-option
                      v-for="option in item.options"
                      :key="option.value"
                      :value="option.value"
                      :label="option.label"
                    />
                  </el-select>
                  <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
                </div>
              </template>
              <template v-else-if="item.type === 'datepicker'">
                <div class="flex w-full items-center">
                  <el-date-picker
                    class="flex-1"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    v-bind="item.otherOptions"
                    v-model="modelValue[`${item.field}`]"
                  />
                  <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
                </div>
              </template>
              <template v-else-if="item.type === 'number'">
                <div class="flex w-full items-center">
                  <el-input
                    class="flex-1"
                    :disabled="item.disabled ?? false"
                    :placeholder="item.placeholder"
                    type="number"
                    v-model.number="modelValue[`${item.field}`]"
                    clearable
                    :maxlength="item.maxlength"
                  />
                  <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
                </div>
              </template>
              <template v-else-if="item.type === 'switch'">
                <div class="flex w-full items-center">
                  <el-switch
                    class="flex-1"
                    v-model.trim="modelValue[`${item.field}`]"
                    :active-value="item.activeValue"
                    :inactive-value="item.inactiveValue"
                  />
                  <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
                </div>
              </template>
              <template v-else-if="item.type === 'textarea'">
                <div class="flex w-full items-center">
                  <el-input
                    class="flex-1"
                    type="textarea"
                    :disabled="item.disabled ?? false"
                    :placeholder="item.placeholder"
                    :maxlength="item.maxlength"
                    v-model.trim="modelValue[`${item.field}`]"
                    :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
                    :show-word-limit="item.showWord"
                  />
                  <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
                </div>
              </template>
              <template v-if="item.slotName != undefined">
                <slot :name="item.slotName"></slot>
              </template>
            </el-form-item>
            <template v-else>
              <slot :name="item.slotName"></slot>
            </template>
          </el-col>
        </template>
      </el-row>
      <el-form-item>
        <div class="footerFrom">
          <slot name="footer"></slot>
        </div>
      </el-form-item>
    </el-form>
  </el-card>
  <el-form
    v-else
    ref="ruleFormRef"
    :label-width="labelWidth"
    status-icon
    :model="modelValue"
    v-bind="$attrs"
  >
    <el-row>
      <template v-for="item in formItems" :key="item.label">
        <el-col :span="item.colSpan ?? 24">
          <el-form-item v-if="!item.isHidden" :label="item.label" :prop="item.field">
            <template v-if="item.type === 'input' || item.type === 'password'">
              <div class="flex w-full items-center">
                <el-input
                  class="flex-1"
                  :disabled="item.disabled ?? false"
                  :placeholder="item.placeholder"
                  :show-password="item.type === 'password'"
                  v-model.trim="modelValue[`${item.field}`]"
                  clearable
                  :maxlength="item.maxlength"
                />
                <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
              </div>
            </template>
            <template v-else-if="item.type === 'select'">
              <div class="flex w-full items-center">
                <el-select
                  class="flex-1"
                  :disabled="item.disabled ?? false"
                  :multiple="item.multiple ?? false"
                  :placeholder="item.placeholder"
                  v-model="modelValue[`${item.field}`]"
                  style="width: 100%"
                  clearable
                  @change="handleChange(item)"
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :value="option.value"
                    :label="option.label"
                  />
                </el-select>
                <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
              </div>
            </template>
            <template v-else-if="item.type === 'datepicker'">
              <div class="flex w-full items-center">
                <el-date-picker
                  class="flex-1"
                  unlink-panels
                  value-format="YYYY-MM-DD"
                  v-bind="item.otherOptions"
                  v-model="modelValue[`${item.field}`]"
                />
                <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
              </div>
            </template>
            <template v-else-if="item.type === 'number'">
              <div class="flex w-full items-center">
                <el-input
                  class="flex-1"
                  :disabled="item.disabled ?? false"
                  :placeholder="item.placeholder"
                  type="number"
                  v-model.number="modelValue[`${item.field}`]"
                  clearable
                  :maxlength="item.maxlength"
                />
                <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
              </div>
            </template>
            <template v-else-if="item.type === 'switch'">
              <div class="flex w-full items-center">
                <el-switch
                  class="flex-1"
                  v-model.trim="modelValue[`${item.field}`]"
                  :active-value="item.activeValue"
                  :inactive-value="item.inactiveValue"
                />
                <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
              </div>
            </template>
            <template v-else-if="item.type === 'textarea'">
              <div class="flex w-full items-center">
                <el-input
                  class="flex-1"
                  type="textarea"
                  :disabled="item.disabled ?? false"
                  :placeholder="item.placeholder"
                  :maxlength="item.maxlength"
                  v-model.trim="modelValue[`${item.field}`]"
                  :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
                  :show-word-limit="item.showWord"
                />
                <span v-if="item.unit" class="ml-2">{{ item.unit }}</span>
              </div>
            </template>
            <template v-if="item.slotName != undefined">
              <slot :name="item.slotName"></slot>
            </template>
          </el-form-item>
          <template v-else>
            <slot :name="item.slotName"></slot>
          </template>
        </el-col>
      </template>
    </el-row>
    <el-form-item>
      <div class="footerFrom">
        <slot name="footer"></slot>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { FormItem } from "./formType";
import { ref } from "vue";
import type { FormInstance } from "element-plus";

const emits = defineEmits<{
  change: [value: FormItem];
}>();

// 定义属性
interface Props {
  formItems: FormItem[]; // 表单配置项
  labelWidth?: string; // 每个表单标题宽度
  modelValue?: object; //绑定表单的每个数据
  formAndTable?: boolean;
}
const { formItems = [], labelWidth, modelValue = {}, formAndTable = true } = defineProps<Props>();
const ruleFormRef = ref<FormInstance>();

const handleChange = (item: FormItem) => {
  emits("change", item);
};

defineExpose({
  ruleFormRef,
});
</script>

<style scoped lang="scss">
.footerFrom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
